﻿// FACTORY
UiFieldFactory = function () {
    var mapTypeControl = {
        'textbox': 'TextBoxFieldControl',
        'multi_textbox': 'MultiTextBoxFieldControl',
        'datepicker': 'DatePickerFieldControl',
        'multi_datepicker': 'MultiDatePickerFieldControl',
        'combobox': 'ComboboxFieldControl',

        'phonenumber': 'PhoneNumberFieldControl'
    };

    function getControl(obj) {
        try {
            var $obj = $(obj);
            var type = $obj.attr('data-controlType');
            return eval('mapTypeControl.' + type);

        } catch (e) {
            alert(e);

            throw e;
        }

    }

    this.renderField = function (options) {
        var control = getControl(options.object);
        var dsKey = $(options.object).attr('data-dataSource');
        var ds = getDataSource(dsKey);
        eval('$(options.object).' + control + '(undefined, ds)');
    };

    this.getData = function (options) {
        var control = getControl(options.object);

        var name = $(options.object).attr('data-fieldName');

        return { Name: name, Data: eval('$(options.object).' + control + '("getData")') };
    };

    this.setData = function (options) {
        var control = getControl(options.object);

        eval('$(options.object).' + control + '("setData", options.data)');
    };

    function getDataSource(name) {
        if (name == 'Genre')
            return [
            { Id: 0, Value: 'Mr' },
            { Id: 1, Value: 'Mrs' },
            { Id: 2, Value: 'Ms' }
            ];
        if (name == "Nationalities") {
            return [
            { Id: 0, Value: 'Vietnam' },
            { Id: 1, Value: 'France' },
            { Id: 2, Value: 'USA' }
            ];
        }
        if (name == "DevLevel") {
            return [
            { Id: 0, Value: 'Junior' },
            { Id: 1, Value: 'Intermediate' },
            { Id: 2, Value: 'Senior' }
            ];
        }
        return undefined;
    }

    this.renderFieldSet = function (target, template, data) {
        if (template.Render == 'FiedGroupRenderType1') {
            renderFieldSetType1(target, template);
            if (data == undefined) return;
            bindFieldSetType1(target, data);
        }
    };

    this.getFieldSetData = function (set, template) {
        if (template.Render == 'FiedGroupRenderType1') {
            return getDataFieldControls_1(set);
        }
    };

    function getDataFieldControls_1(set) {
        var fields = $(set).find('.fieldControl');
        var fsetId = $(set).attr('data-fsetId');
        if (fsetId == undefined)
            fsetId = -1;
        var fsetType = 'fsetType1';
        var fdata = [];

        for (var i = 0; i < fields.length; i++) {
            fdata.push(uiFieldFactory.getData({ object: fields[i] }));
        }
        // [{Name:name, Data:data}]
        return { Id: fsetId, fsetType: fsetType, fdata: fdata };
    }

    function bindFieldSetType1(set, data) {
        $(set).attr("data-fsetId", data.Id);
        for (var i = 0; i < data.fdata.length; i++) {
            var fieldData = data.fdata[i];
            $(set).find('.fieldControl[data-fieldName=' + fieldData.Name + ']').each(function () {
                uiFieldFactory.setData({ object: this, data: fieldData.Data });
            });
        }
    }

    function renderFieldSetType1(target, template) {
        var t = $(target);
        var txt = '<table style="width: 100%; vertical-align: middle">';
        for (var i = 0; i < template.Fields.length; i++) {
            var f = template.Fields[i];
            var isMultiple = f.ControlType.startWith("multi_");
            var vAlign = isMultiple ? "top" : "middle";
            var paddingTop = isMultiple ? "padding-top:3px" : "";


            txt += '<tr>';
            txt += '<td style="width: 40%; text-align: right;vertical-align: @vAlign;@paddingTop">@title</td>'
            .replaceAll('@vAlign', vAlign)
            .replaceAll('@paddingTop', paddingTop)
            .replaceAll('@title', f.Title); // Can render control at this step
            txt += '<td style="padding-left: 8px"><div class="@controlType fieldControl" data-controlType="@controlType" data-fieldName="@name" data-dataSource="@dataSource" /></td>'
            .replaceAll('@controlType', f.ControlType)
            .replaceAll('@name', f.Name)
            .replaceAll('@dataSource', f.DataSource == undefined ? '' : f.DataSource);

            txt += '</tr>';
        }

        txt += '</table>';
        t.html(txt);

        var fields = $(target).find('.fieldControl');
        for (var i = 0; i < fields.length; i++) {
            uiFieldFactory.renderField({ object: fields[i], data: {} });
        }
    }
};
var uiFieldFactory = new UiFieldFactory();


function genericHandle(sender, name, cmd, options) {
    if (cmd == null) {
        sender.context.Control = eval('new ' + name + '($(sender), options)');
        return undefined;
    }

    if (cmd == 'setData') {
        sender.context.Control.setData(options);
    }
    if (cmd == 'getData') {
        return sender.context.Control.getData();
    }
}

// JQUERY
$.fn.TextBoxFieldControl = function (cmd, options) {
    return genericHandle(this, 'TextBoxFieldControl', cmd, options);
};
$.fn.DatePickerFieldControl = function (cmd, options) {
    return genericHandle(this, 'DatePickerFieldControl', cmd, options);
};
$.fn.PhoneNumberFieldControl = function (cmd, options) {
    return genericHandle(this, 'PhoneNumberFieldControl', cmd, options);
};
$.fn.MultiTextBoxFieldControl = function (cmd, options) {
    return genericHandle(this, 'MultiTextBoxFieldControl', cmd, options);
};
$.fn.MultiDatePickerFieldControl = function (cmd, options) {
    return genericHandle(this, 'MultiDatePickerFieldControl', cmd, options);
};
$.fn.ComboboxFieldControl = function (cmd, options) {
    return genericHandle(this, 'ComboboxFieldControl', cmd, options);
};